<html>
<head>
    <title>订单管理</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px ">
        <div class="layui-inline">
            <label class="layui-form-label">订单编号</label>
            <div class="layui-input-inline">
                <input type="text" id="input1" name="code" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline layui-input-wrap">
                <select id="select1">
                    <option value="" selected>所有</option>
                    <option value="1">待发货</option>
                    <option value="0">未支付</option>
                    <option value="2">已发货</option>
                    <option value="3">已完成</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <input id="searchBtn" type="button" value="查询" class="layui-btn">
        </div>
    </div>
</form>

<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>
<table id="table1"></table>
<!-- 弹出窗口的模板 -->
<script id="template1" type="text/html">

</script>

<!--表头编辑删除模板-->
<script id="template2" type="text/html">
        <input lay-event="look" type="button" value="订单详情" class="layui-btn layui-btn-xs">
        {{# if(d.status==1){ }}
        <input lay-event="edit" type="button"  value="发货" class="layui-btn layui-btn-xs layui-bg-red">
        {{# } }}
</script>

<script id="personalTemplate" type="text/html">
    {{#  layui.each(d,function(index,item){   }}
    {{#  layui.each(item.details,function(x,y){   }}

    <div style="display: flex; width: 80%; height: 150px; margin: 10px 30px;">
        <div style="display: flex; flex-direction: column">
            <h3>{{=y.title }}</h3>
            <div>口味：{{=y.taste }}</div>
            <div>包装：{{=y.packages }}</div>
            <div>价格：￥{{=y.oldPrice }}</div>
            <div>数量：{{=y.amount }}件</div>
        </div>
    </div>
    {{#   })  }}
    {{#   })  }}
</script>

<script th:inline="none">
    layui.use(["layer", "form", "table", "upload","laytpl"], function () {
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var laytpl = layui.laytpl;



        $("#searchBtn").on("click", function () {
            table.render({
                elem: "#table1",
                cols: [[
                    {title: "选择", type: "checkbox"},
                    {title: "序号", type: "numbers"},
                    {title: "订单号", field: "code"},
                    {title: "订单总价格", field: "price"},
                    {title: "收货人", field: "name"},
                    {title: "电话", field: "tel"},
                    {title: "操作", templet: "#template2"}
                ]],
                url: "/order/list",
                where: {code: $("#input1").val(),status: $("#select1").val()},
                //分页操作
                page: true,
                //每页显示多少条
                limits: [5, 10, 20],
                limit: 5
            });
        }).click();

        table.on("tool", function (obj) {
            var event = obj.event;
            var data = obj.data;
            if(event==="edit") {
                layer.confirm("您确定要发货吗?", function () {
                    //  user/delete/3 restful风格
                    console.log(data.id)
                    $.post("/order/sendGoods", {id: data.id}, function () {
                        console.log(data.id);
                        layer.msg("发货成功")
                        $("#searchBtn").click();
                    })
                })
            }
            if (event === "look") {
                //获取当前这个商品的所有数据，取成功了载弹出
                console.log(data.id)
                $.get("/order/details?id=" + data.id, function (order) {

                    //打开弹出窗口
                    laytpl($("#personalTemplate").html()).render(order.data, function (a) {
                        $("#template1").html(a);
                    });
                    layer.open({
                        title: "商品详情",
                        type: 1,
                        area: ['400px', '500px'],
                        content: $("#template1").html()
                    });
                });
            }
        });

        // //给多选停用按钮绑事件
        // $("#resetBtn").on("click", function () {
        //     var o = table.checkStatus("table1")
        //     if (o.data.length == 0) {
        //         layer.msg("至少选中一行")
        //         return false;
        //     }
        //     layer.confirm("您确定要重置选中账号的密码吗？", function () {
        //         var ids = "";
        //         $.each(o.data, function (index, item) {
        //             if (ids) {
        //                 ids += ",";
        //             }
        //             ids += item.id;
        //         });
        //         $.post("/member/resetAll", {ids: ids}, function () {
        //             layer.closeAll();
        //             layer.msg("重置成功！默认密码为123456");
        //             $("#searchBtn").click();
        //         });
        //     });
        // });


    })


</script>


</body>
</html>